<template>
  <view>
    <view class="public-content" style="
        background: linear-gradient(
          rgb(219, 231, 244) 0%,
          rgb(137, 181, 220) 30%,
          rgb(50, 132, 196) 60%,
          rgb(50, 132, 196) 100%
        );
      ">
      <top-nav-bar backgroundColor="rgba(222, 233, 245, 0.3)" />
      <view class="public-box">
        <view style="height: 1246rpx" class="top-carousel">
          <image src="/static/barnd_01.png" mode="widthFix" style="width: 100%; height: 100%"></image>
          <view class="title">
            <view class="h1">{{ $t('index.title1') }}</view>
            <view class="h4">{{ $t('index.title2') }}</view>
            <view class="btn" @click.stop="onGo()">{{ $t('index.title.btn') }}</view>
          </view>
        </view>
        <view class="title-card new-top-card" style="background: #0e3ddf52">
          <text>{{ $t('index.title20') }}</text>
          <view class="btn" @click="onProduct">
            {{ $t('index.title21') }}
          </view>
        </view>
        <view class="top-carousel">
          <view class="top-title">
            <text>{{ $t('home.desc1') }}</text>
            <text>{{ $t('home.desc2') }}</text>
          </view>
          <image src="/static/index-2.png" mode="widthFix"></image>
        </view>
        <view id="title1" class="title-card">
          {{ $t('index.partner.title') }}
        </view>
        <view class="top-carousel">
          <image src="/static/index-3.png" mode="aspectFill" style="width: 100%; height: 100%"></image>
          <view class="title">
            <view class="h1">{{ $t('index.title1') }}</view>
            <view class="h4">{{ $t('index.title2') }}</view>
            <view class="btn" @click.stop="onOpenChat()">
              {{ $t('customer.title') }}
            </view>
          </view>
        </view>

        <view class="top-carousel" @click="onBottomGo">
          <view class="bottom-title"> {{ $t('home.desc3') }} </view>
          <view class="tou">
            <view v-for="item in 5" :key="item" class="tou-item">
              <view v-if="item === 5">
                <uni-icons type="more-filled" size="20" color="#fff"></uni-icons>
              </view>
              <image v-else :src="`/static/Ellipse-${item}.png`" mode="aspectFill"></image>
            </view>
          </view>
          <view class="bottom-des"> {{ $t('home.desc4') }} </view>
          <view class="bottom-num"> 97,878+ </view>
        </view>
      </view>
    </view>
    <foot-page />
    <view class="float-box">
      <view class="row" @click="onOpenChat">
        <image src="/static/online.svg" class="icon"></image>
        <text>{{ $t('index.right.name1') }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onReady } from '@dcloudio/uni-app'
import { useUser } from '@/hooks/useUser'
import { useChat } from '@/hooks/useChat'

const { needLogin } = useUser()

const { onOpenChat } = useChat()

const onBottomGo = () => {
  uni.navigateTo({
    url: '/pages/product/product'
  })
}

const onGo = () => {

  needLogin().then((res) => {
    if (res) {
      uni.navigateTo({
        url: '/pages/apply-for/apply-for'
      })
    }
  })
}

const onProduct = () => {
  uni.navigateTo({
    url: '/pages/product/product'
  })
}

onReady(() => { })
</script>

<style lang="scss">
.public-content {
  opacity: 1;

  transition: all 2s ease-in-out 0s;
}

.top-carousel+.top-carousel {
  margin-top: 48rpx;
}

.top-carousel {
  background: #fff;
  position: relative;
  border-radius: 40rpx;
  height: 1000rpx;
  overflow: hidden;

  // 点击时变小10rpx并加上过渡效果

  &:active {
    transform: scale(0.98);
  }

  &:nth-child(3) {
    image {
      width: 388rpx;
      height: 448rpx;
      margin-left: 132rpx;
    }
  }

  &:nth-child(6) {
    height: 720rpx;
    padding: 88rpx 0 46rpx 60rpx;

    .bottom-title {
      width: 336rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .tou {
      position: relative;
      display: flex;
      height: 80rpx;
      margin: 64rpx 0 62rpx;

      .tou-item {
        position: absolute;
        border-radius: 100rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 80rpx;
          height: 80rpx;
        }

        &:nth-child(2) {
          left: 60rpx;
        }

        &:nth-child(3) {
          left: 120rpx;
        }

        &:nth-child(4) {
          left: 180rpx;
        }

        &:nth-child(5) {
          left: 240rpx;
          background: #3462fe;
          width: 80rpx;
          height: 80rpx;
          border: 4rpx solid #ffffff;
          box-sizing: border-box;
        }
      }
    }

    .bottom-des {
      width: 352rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #666666;
      text-align: left;
      font-style: normal;
      text-transform: none;
      margin-bottom: 62rpx;
    }

    .bottom-num {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 64rpx;
      color: #3462fe;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .top-title {
    display: flex;
    flex-direction: column;
    padding: 70rpx 60rpx 60rpx;

    text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      text-align: left;
      font-style: normal;
      text-transform: none;
      width: 392rpx;

      &:first-child {
        font-size: 48rpx;
        color: #333333;
        margin-bottom: 48rpx;
        width: 560rpx;
      }
    }
  }

  .title {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(rgba(16, 41, 183, 0.04) 15.73%,
        rgba(16, 41, 183, 0.06) 39.1%,
        rgba(16, 41, 183, 0.2) 50.16%,
        rgba(16, 41, 183, 0.6) 69.63%,
        rgb(16, 41, 184) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 72rpx 82rpx;

    &:nth-child(3) {
      background: none;
    }

    .h1 {
      width: 88%;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .h4 {
      width: 88%;
      margin: 34rpx 0 28rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .btn {
      width: 332rpx;
      height: 84rpx;
      line-height: 84rpx;
      border-radius: 40rpx;
      background: #3462fe;
      color: rgb(255, 255, 255);
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}

.title-card {
  height: 226rpx;
  border-radius: 32rpx;
  background: #3462fe;
  margin: 48rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 48rpx;
  color: #ffffff;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.new-top-card {
  padding: 100rpx 40rpx;
  display: flex;
  flex-direction: column;

  .btn {
    margin-top: 40rpx;
    width: 100%;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 40rpx;
    // background: linear-gradient(to right, #3462fe9e, #3462fe);
    background: #0436df;
    color: #fff;
    font-size: 30rpx;
    text-align: center;
  }
}

.float-box {
  position: fixed;
  right: 10rpx;
  top: 40vh;

  .row {
    // width: 120rpx;
    // padding: 16rpx;
    width: 138rpx;
    height: 138rpx;
    border-radius: 140rpx;
    background: #3462fe;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14rpx;

    .icon {
      width: 68rpx;
      height: 68rpx;
    }

    text {
      color: #fff;
      // margin-bottom: 10px;
    }

    // text {
    //   // 文字竖排序
    //   writing-mode: vertical-rl;
    //   /* 垂直排列，从右到左 */
    //   text-orientation: mixed;
    //   /* 文字方向：中文正立，英文可旋转 */
    //   font-size: 32rpx;
    //   line-height: 1.8;
    // }
  }
}

#title1 {
  height: auto;
  padding: 32rpx;
}
</style>
